<template>
  <div id="homepage" class="homepage">
    <el-select
      v-model="searchObj.days"
      placeholder="请选择"
      @change="changeDays"
    >
      <el-option
        v-for="item in daysOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-row>
      <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="4">
        <div
          @click="printTest2"
          class="box"
          style="height: 90px; position: relative"
        >
          <div class="left_icon el-icon-share" style="color: #f7c114"></div>
          <div class="right">
            <div class="right1">so总数</div>
            <div class="right2">{{ this.soCount }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="4">
        <div class="box" style="height: 90px; position: relative">
          <div
            class="left_icon el-icon-office-building"
            style="color: #c97586"
          ></div>
          <div class="right">
            <div class="right1">已发运</div>
            <div class="right2">{{ this.shippedCount }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="4">
        <div class="box" style="height: 90px; position: relative">
          <div class="left_icon el-icon-printer" style="color: #65318e"></div>
          <div class="right">
            <div class="right1">待发运</div>
            <div class="right2">{{ this.unShippedCount }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="8" :sm="8" :md="8" :lg="5" :xl="4">
        <div class="box" style="height: 90px; position: relative">
          <div class="left_icon el-icon-s-data" style="color: #9ba88d"></div>
          <div class="right">
            <div class="right1">入库单</div>
            <div class="right2">{{ this.acceptCount }}</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
        <div class="box" style="height: 90px; position: relative">
          <div class="left_icon el-icon-goods" style="color: #007b43"></div>
          <div class="right">
            <div class="right1">质检</div>
            <div class="right2">{{ this.qcCount }}</div>
          </div>
        </div>
      </el-col>

      <!-- <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
        <div class="box" style="height: 90px; position: relative">
          <div
            class="left_icon el-icon-video-camera"
            style="color: #c0c6c9"
          ></div>
          <div class="right">
            <div class="right1">移库</div>
            <div class="right2">424</div>
          </div>
        </div>
      </el-col> -->
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
            <div class="box">
                <div class="box3" style="position: relative">
                    <div style="position: absolute; right: 50px; top: 15px">
                        <el-radio-group v-model="radio2" size="medium">
                            <el-radio-button label="0"
                                >七天</el-radio-button
                            >
                            <el-radio-button label="1"
                                >本月</el-radio-button
                            >
                            <el-radio-button label="2"
                                >本季</el-radio-button
                            >
                        </el-radio-group>
                    </div>
                    <div
                        id="main"
                        style="width: 98%; height: 350px; margin-top: 40px"
                    ></div>
                </div>
            </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <div class="box">
                <el-row>
                    <el-col :span="12">
                        <div class="box3">
                            <dv-decoration-9
                                style="width: 120px; height: 120px"
                                >66%</dv-decoration-9
                            >
                            <div class="title">库存周转率</div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="box3">
                            <dv-water-level-pond
                                :config="config"
                                style="width: 120px; height: 120px"
                            />
                            <div class="title">货位利用率</div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="box">
                <el-row>
                    <el-col :span="24">
                        <div class="box3">
                            <div class="title2">任务进行</div>
                            <el-row>
                                <el-col :span="3">
                                    <div class="title3">上架</div>
                                </el-col>
                                <el-col :span="21"
                                    ><el-progress
                                        :stroke-width="12"
                                        :percentage="50"
                                    ></el-progress
                                ></el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3"
                                    ><div class="title3">拣货</div>
                                </el-col>
                                <el-col :span="21">
                                    <el-progress
                                        :stroke-width="12"
                                        :percentage="100"
                                    ></el-progress>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3"
                                    ><div class="title3">补货</div>
                                </el-col>
                                <el-col :span="21"
                                    ><el-progress
                                        :stroke-width="12"
                                        :percentage="100"
                                        status="success"
                                    ></el-progress
                                ></el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3"
                                    ><div class="title3">装箱</div>
                                </el-col>
                                <el-col :span="21"
                                    ><el-progress
                                        :stroke-width="12"
                                        :percentage="100"
                                        status="warning"
                                    ></el-progress
                                ></el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="3"
                                    ><div class="title3">集货</div>
                                </el-col>
                                <el-col :span="21"
                                    ><el-progress
                                        :stroke-width="12"
                                        :percentage="50"
                                        status="exception"
                                    ></el-progress
                                ></el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :md="12" :lg="6" :xl="6">
            <div class="box" style="height: 90px; position: relative">
                <div class="box3">
                    <div class="title2">对接程序</div>
                </div>
            </div>
        </el-col>

        <el-col :md="12" :lg="6" :xl="6">
            <div class="box" style="height: 90px; position: relative">
                <div class="box3">
                    <div class="title2">PLC</div>
                </div>
            </div>
        </el-col>

        <el-col :md="12" :lg="6" :xl="6">
            <div class="box" style="height: 90px; position: relative">
                <div class="box3">
                    <div class="title2">四向车1</div>
                    <dv-percent-pond
                        :config="config5"
                        style="width: 100px; height: 30px; font-size: 10px"
                    />
                </div>
            </div>
        </el-col>

        <el-col :md="12" :lg="6" :xl="6">
            <div class="box" style="height: 90px; position: relative">
                <div class="box3">
                    <div id="deviceId" class="title2">设备心跳</div>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row>
  <!-- <el-col :span="24"><div class="box" >
      <div class="box3">
        <el-tabs style="margin-top:15px" v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="待审核" name="first">
            <el-table
                  :data="tableData"
                  style="width: 90%"
                  :row-class-name="tableRowClassName">
                  <el-table-column
                    prop="orderNo"
                    label="单据号"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="发起人"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="发起日期">
                    <template slot-scope="scope">
                      <i class="el-icon-time"></i>
                      <span style="margin-left: 10px">2020-02-01</span>
                    </template>
                  </el-table-column>
                   <el-table-column
                    prop="address"
                    label="审核节点">
                  </el-table-column>
                   <el-table-column
                    prop="address"
                    label="审核人">
                  </el-table-column>
                   <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
          </el-tab-pane>
          <el-tab-pane label="超期预警" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="设备异常" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>


              </div>


    </div></el-col> -->


</el-row>
    <!-- <img src="../assets/images/test1.png" alt="test1.png" width="100%">-->
  </div>
</template>

<script>
import print from "print-js";
import { mapState } from "vuex";

var echarts = require("echarts");

export default {
  name: "Homepage",
  data() {
    return {
      soCount: 0,
      shippedCount: 0,
      unShippedCount: 0,
      acceptCount: 0,
      qcCount: 0,
      searchObj: {
        days: "7",
      },
      daysOptions: [
        {
          value: "1",
          label: "1天",
        },
        {
          value: "2",
          label: "2天",
        },
        {
          value: "3",
          label: "3天",
        },
        {
          value: "4",
          label: "4天",
        },
        {
          value: "5",
          label: "5天",
        },
        {
          value: "6",
          label: "6天",
        },
        {
          value: "7",
          label: "7天",
        },
      ],
      radio2: 0,
      config: {
        data: [66, 45],
        shape: "roundRect",
      },
      config5: {
        value: 66,
        textColor: "black",
      },
      tableData: [
        {
          orderNo: "126",
          date: "2016-05-02",
          name: "郭靖勋",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          orderNo: "127",
          date: "2016-05-04",
          name: "郭靖勋",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          orderNo: "128",
          date: "2016-05-01",
          name: "郭靖勋",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          orderNo: "129",
          date: "2016-05-03",
          name: "郭靖勋",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      option: {
        color: [
          "#0090FF",
          "#36CE9E",
          "#FFC005",
          "#FF515A",
          "#8B5CFF",
          "#00CA69",
        ],
        title: {
          text: "操作统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["入库", "出库", "盘点", "调拨", "补货"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            smooth: true,
            name: "入库",
            type: "line",

            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            smooth: true,
            name: "出库",
            type: "line",

            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            smooth: true,
            name: "盘点",
            type: "line",

            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            smooth: true,
            name: "调拨",
            type: "line",

            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            smooth: true,
            name: "补货",
            type: "line",

            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      },

      // productList: this.$store.state.productList // 获取store.js > state > productList
    };
  },
  computed: {
    ...mapState(["productList"]),
  },
  methods: {
    fetchData(val) {
      let param = val ? val : this.searchObj.days;
      IOT.getServerData(
        "/home/statistics/topStatistics",
        "post",
        { days: Number(param) },
        (ret) => {
          if (ret.code === 200) {
            this.soCount = ret.data && ret.data.soCount;
            this.shippedCount = ret.data && ret.data.shippedCount;
            this.unShippedCount = ret.data && ret.data.unShippedCount;
            this.acceptCount = ret.data && ret.data.acceptCount;
            this.qcCount = ret.data && ret.data.qcCount;
          } else {
            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
          }
        },
        true
      );
    },
    changeDays(val) {
      this.fetchData(val);
    },
    printTest2() {
      var aaa = App.baseIp;

      printJS("deviceId", "html");
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    initEcharts() {
      var myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option);
    },
  },
  mounted() {
    this.initEcharts();
  },
  created() {
    this.fetchData();
  },
  /*created() {

    // let Socket = new WebSocket('ws://121.40.165.18:8800');


    if ("WebSocket" in window) {
      console.log("您的浏览器支持 WebSocket!");

      // 打开一个 web socket
      var ws = new WebSocket('ws://121.40.165.18:8800');

      ws.onopen = function () {
        // Web Socket 已连接上，使用 send() 方法发送数据
        ws.send("发送数据");
        console.log("数据发送中...");
      };

      ws.onmessage = function (evt) {
        var received_msg = evt.data;
        console.log("数据已接收...");
        console.log(evt)
      };

      ws.onclose = function () {
        // 关闭 websocket
        console.log("连接已关闭...");
      };
    } else {
      // 浏览器不支持 WebSocket
      console.log("您的浏览器不支持 WebSocket!");
    }
  }*/
};
</script>

<style scoped lang="less">
.homepage {
  .box {
    //   box-shadow: 0 2px 4px #c1deff, 0 0 6px #c1deff;

    border-radius: 10px;
    margin: 10px 15px 5px 8px;
    padding: 0px 20px 10px 0px;

    background-color: white;

    .left_icon {
      position: absolute;
      margin: 40px 20px;
    }

    .right {
      position: absolute;
      margin: 25px 20px;
      left: 45%;

      .right1 {
        font-size: 17px;
        margin: 0px 0px 10px 0px;
      }

      .right2 {
        font-size: 22px;
        font-weight: 700;
        margin: 5px 0px 10px 0px;
      }
    }

    .left_icon:before {
      font-size: 1cm;
    }
  }

  .box2 {
    margin: 10px 15px 0px 0px;
    padding: 10px 0px 0px 15px;
    border-radius: 5px;
    height: 80px;
  }

  .box3 {
    margin: 10px 0px 0px 15px;
    padding: 2px 0px 0px 15px;
    border-radius: 5px;

    .title {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 12px 0px 0px 25px;
      font-weight: 700;
    }

    .title2 {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 0px 0px 5px 0px;
      font-weight: 700;
      font-size: 20px;
    }

    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }

    .title3 {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 8px 0px 4px 0px;
      font-weight: 550;
      font-size: 10px;
    }
  }

  .el-progress {
    width: 80%;
    line-height: 2;
    // display: inline;
  }

  .el-tabs--card {
    border: none;
  }
}
</style>
 